<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜拳小游戏</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0 none;
        }
        
        body>div {
            float: left;
            height: 100vh;
        }
        
        .player {
            width: 30%;
            box-shadow: 0 0 2px 3px red;
        }
        
        .vs {
            width: 40%;
            box-shadow: 0 0 2px 3px green;
        }
        
        .vs>button {
            width: 200px;
            height: 100px;
            font-size: 20px;
            display: block;
            margin: 100px auto;
            color: #fff;
            background-color: blueviolet;
            transition: all .3s ease;
        }
        
        .list {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid brown;
            overflow-x: hidden;
        }
        
        .list>li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            border-bottom: 1px solid brown;
            font-size: 20px;
            box-sizing: border-box;
            padding-left: 20px;
        }
        
        .list>li:nth-child(1) {
            font-size: 25px;
            justify-content: center;
            align-items: center;
        }
        
        .vs>button:hover {
            background-color: tomato;
            border: 4px solid tomato;
        }
        
        .pc {
            width: 30%;
            box-shadow: 0 0 2px 3px blue;
        }
        
        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="player">
        <div>
            <img id="player-img" src="1.webp" alt="">
        </div>
        <ul>
            <li><input name="select" type="radio" value="1" checked>剪刀</li>
            <li><input name="select" type="radio" value="2">石头</li>
            <li><input name="select" type="radio" value="3">布</li>
        </ul>
    </div>
    <div class="vs">
        <button id="vs">对决</button>
        <ul class="list">
            <li>对局信息</li>

        </ul>
    </div>
    <div class="pc">
        <div>
            <img id="pc-img" src="1.webp" alt="">
        </div>
    </div>

    <script>
        let player = 1;
        let pc = 1;
        let quan = ['', '剪刀', '石头', '布'];
        let timer;
        let timer2;
        // 赢局
        let win = 0;
        // 输局
        let lose = 0;
        // 平局
        let tie = 0;
        // 总局
        let sum = 0;

        // let winning_rate = '0%';
        let pc_imgEle = document.querySelector('#pc-img');
        let player_imgEle = document.querySelector('#player-img');
        // 1.获取单选框
        let ipts = document.querySelectorAll('input');
        // 2. 绑定事件
        for (let i = 0; i < ipts.length; i++) {
            // ipts[i].onclick = function() {
            //     alert(123);
            // }
            ipts[i].addEventListener('click', function() {
                // alert(i + 1)
                // alert(this.value)
                player = this.value;
                player_imgEle.src = player + '.webp';
                //  = player + '.webp'
                console.log(player_imgEle.src);
                console.log(player);
            });
        };
        let list = document.querySelector('.list');

        // 对决按钮的事件
        document.getElementById('vs').onclick = function() {
            clearInterval(timer);

            let li = document.createElement('li');
            if (win / sum > 0.2) {
                if (player == 1) {
                    pc = 2
                } else if (player == 2) {
                    pc = 3
                } else {
                    pc = 1
                }

            } else if (win / sum < 0.2) {
                if (player == 1) {
                    pc = 3
                } else if (player == 2) {
                    pc = 1
                } else {
                    pc = 2
                }
            } else {
                pc = Math.round(Math.random() * 2) + 1
            }
            // alert(123)
            // 随机生成一个值 代表pc出的拳法
            // pc = Math.round(Math.random() * 2) + 1;
            pc_imgEle.src = pc + '.webp';
            console.log('pc:', pc, 'player:', player);
            // 判断
            if (player == pc) {
                alert(`你出的是${quan[player]},电脑出的是${quan[pc]}。结果为平局`);
                tie = tie + 1;
                sum++
                li.innerHTML = `${zh(sjc)},结果为平局!  ${Math.round(win / sum * 100) + '%'}`
            } else if (player == 1 && pc == 3 || player == 2 && pc == 1 || player == 3 && pc === 2) {
                alert(`你出的是${quan[player]},电脑出的是${quan[pc]}。结果为你赢了`);
                win = win + 1;
                sum++
                li.innerHTML = `${zh(sjc)},结果为你赢了!  ${Math.round(win / sum * 100) + '%'}`
            } else {
                alert(`你出的是${quan[player]},电脑出的是${quan[pc]}。结果为你输了`);
                lose = lose + 1;
                sum++
                li.innerHTML = `${zh(sjc)},结果为你输了!  ${Math.round(win / sum * 100) + '%'}`
            }
            list.appendChild(li)
                // 重复完
            if (timer2) {
                clearTimeout(timer2)
            }
            timer2 = setTimeout(() => {
                    // clearInterval(timer);
                    pcImgRun();
                    // timer2 = null
                }, 3000)
                // 胜率
                // let winning_rate = ;
            console.log(tie, win, lose, sum);
            // console.log(winning_rate);
        };

        function pcImgRun() {
            let i = 1;
            timer = setInterval(() => {
                i = ++i > 3 ? 1 : i;
                pc_imgEle.src = i + '.webp';
            }, 500);

        }
        pcImgRun();

        var sjc = new Date().getTime(); // 获取当前时间戳
        function zh(sjc) {
            var d = new Date(); // 当前时间
            var n = d.getFullYear(); // 年
            var y = checjZero(d.getMonth() + 1); //月 0~11 所以加1
            var r = checjZero(d.getDate()); // 日
            var x = checjZero(d.getHours()); // 小时
            var f = checjZero(d.getMinutes()); // 分钟
            var m = checjZero(d.getSeconds()); // 秒
            function checjZero(i) {
                var num = i < 10 ? '0' + i : i; // 小于10 进行补零操作
                return num;
            }
            return n + '年' + y + '月' + r + '日' + x + '时' + f + '分' + m + '秒';
        }
    </script>
</body>

</html>